@import url('./video_back.less');
@import url('./layout.less');
@import url('./an.less');

@font-face {
  font-family:myFont;
  src:url('../img/思源黑体 CN Bold.otf');
    // src:url('../img/高端黑修订151105.ttf');

}
body {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC', "苹方", "Microsoft YaHei", "微软雅黑", sans-serif;
}
a{
    text-decoration: none;
}
.home .page1 {
  .main-title {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    color: #fff;
    font-size: 18px;

    .content {
      text-align: center;
      position: absolute;
      bottom: 10%;
      padding: 0 10%;
      width: 100%;
      box-sizing: border-box;

      .mobile-btn {
        display: none;
          .none-button {
            background: transparent;
            border: 1px solid #fff;
            padding: 0px 15px;
            font-size: 12px;
            line-height: 32px;
            color: #fff;
          }

      }

      .title {
        font-size: 24px;
      }
    }

    .logo {
      text-align: center;
      max-width: 50%;
      margin: 0 auto;

      img {
        width: 100%;
      }
    }
  }
}

.home .top-nav {
  line-height: 80px;
  color: #fff;
  background: #000;

  .logo {
    float: left;

    .moble-logo {
        display: none;
    }

    .option-icon {
        display: none;
    }

    img {
      vertical-align: middle;
    }

    .close-icon {
        display: none;
    }
  }

  .left {
    float: left;
    text-align: left;

    .meun {
      float: left;
      margin: 0px;
    }

    .meun .meun-item {
      display: inline-block;

      margin-left:20px;
      cursor: pointer;
       a{
           color: #FFFFFF;
           font-size: 14px;
       }

       a:hover {
          color: #949494;
       }
    }
  }

  .right {
    display: inline-block;
    float: right;

    .none-button {
      background: transparent;
      border: 1px solid #fff;
      padding: 0px 15px;
      font-size: 12px;
      line-height: 32px;
      color: #fff;
    }

    .select {
      display: inline-block;
      margin-left: 19px;

      .mask {
          display: none;
      }

      .options {
        position: absolute;
        cursor: pointer;
        display: none;
        a {
            color: #fff;
        }

        a:hover {
            color: #949494;
        }
      }
    }

    .select.show {
        position: relative;

        @media screen and (min-width: 768px) {
            .options {
                background: #000;
                padding: 0 20px;
                margin-right: -40px;
                border: 3px solid #000000;
                top: 60px;
                right: 0;
                display: block;
            }

            .mask {
                display: block;
                position: fixed;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
            }
        }
    }
  }
}

.icon {
  background-size: cover;
  display: inline-block;
  vertical-align: middle;
}

.icon.fj-icon {
  background-image: url('../img/fj-icon.png');
  width: 16px;
  height: 14px;
}

.icon.book-icon {
  background: url('../img/book-icon.png');
  width: 11px;
  height: 13px;
  margin-right: 5px;
}

.icon.down-icon {
  background: url('../img/down-icon.png');
  width: 12px;
  height: 7px;
  margin-left: 9px;
}

.home .top-nav:after {
  content: ' ';
  height: 0px;
  width: 0px;
  clear: both;
  display: block;
}
#liucheng-phone{display: none;}

.home .page2 {
  background: #0c152d;
  position: relative;
  color: #fff;
  padding: 80px 0px;
  padding-bottom: 0px;
  .video-item {
    height: 530px;
    display: flex;
    align-items: center;

    .content {
      font-size: 16px;
      padding-left: 20px;
      padding-right: 40px;

      .header {
        font-size: 24px;
        line-height: 55px;
      }
    }

    .video-play .video-js{
      width: 100%;
      margin: 0 auto;
    }

    .shadow {
      margin: 0 auto;
      width: 560px;
      display: block;
      margin-top: 20px;
      max-width: 100%;
    }
  }

  .float-wrap {
    position: absolute;
  }

  #float-logo1 {
    left: 4%;
    top: 10%;
    -webkit-animation: rotateY 6s infinite linear;
    -o-animation: rotateY 6s infinite linear;
    animation: rotateY 6s infinite linear;


    img {
      width: 52px;
    }
  }

  #float1 {
    left: 5%;
    top: 20%;
    -webkit-animation: rotateFast 3s infinite linear;
    -o-animation: rotateFast 3s infinite linear;
    animation: rotateFast 3s infinite linear;

    img {
      width: 13px;
    }
  }

  #float2 {
    left: 12%;
    top: 13%;
    -webkit-animation: rotateSuperFast 3s infinite linear;
    -o-animation: rotateSuperFast 3s infinite linear;
    animation: rotateSuperFast 3s infinite linear;

    img {
      width: 6px;
    }
  }

  #float-logo2 {
    top: 15%;
    right: 5%;
    -webkit-animation: rotLeft 11s infinite linear;
    -o-animation: rotLeft 11s infinite linear;
    animation: rotLeft 11s infinite linear;

    img {
      width: 96px;
    }
  }

  #float3 {
    top: 10%;
    right: 13%;
    -webkit-animation: rotateSuperFast 3s infinite linear;
    -o-animation: rotateSuperFast 3s infinite linear;
    animation: rotateSuperFast 3s infinite linear;

    img {
      width: 4px;
    }
  }

  .how-use {
    text-align: center;
    width: 80%;
    margin: 0 auto;
    margin-top: 200px;

    .header {
      font-size: 30px;
    }

    img {
      width: 100%;
      margin-top: 130px;
      margin-bottom: 130px;
    }
  }
}
.home .page3{
    background: #f5f5f5;
    overflow: hidden;
    .page3-header{
        text-align: center;
        padding: 100px 0px;
        h2{
          font-weight: normal;
          margin-bottom: 18px;
        }
        p{
          width: 50%;
          margin: 0 auto;
          line-height: 25px;
          color: #666666;
        }
    }
    .page3-section{
      display: flex;
      align-items: center;
      width: 70%;
      margin: 15px auto;
      overflow: hidden;
      margin-bottom: 50px;
      .section-words{
          width: 50%;
          float: left;
          p{
            line-height: 23px;
            color: #666666;
          }
      }
      .img-phone{display: none;}
      .img-pc{display: block;}
      .section-imgs{
          width: 50%;
          float: left;
          text-align:center;

          img{
              width:280px;
          }
      }
      .section-imgs-right{

      }
      .section-imgs-left{

      }
      .section-imgs-radar{

      }
    }
}
.home .page4{
   background-image: -moz-linear-gradient( -90deg, rgb(5,17,49) 0%, rgb(3,0,19) 100%);
   background-image: -webkit-linear-gradient( -90deg, rgb(5,17,49) 0%, rgb(3,0,19) 100%);
   background-image: -ms-linear-gradient( -90deg, rgb(5,17,49) 0%, rgb(3,0,19) 100%);
    color: #FFFFFF;
    overflow: hidden;
    position: relative;
    .container{
        width: 60%;
        margin: 80px auto;
    }
    .slides{
        text-align: center;
    }
    h4{
        margin-top: 65px;
    }
    p{
        line-height: 22px;
        font-size: 14px;
    }
    .flex-direction-nav a{
        opacity: 1;
        text-indent: 0px;
        text-decoration: none;
        font-size: 30px;
        font-weight: 400;
        color: #FFFFFF;
        top: 200px;
        cursor: pointer;
    }
    a.flex-prev{
      left: 0px;
    }
    a.flex-next{
       right: 0px;
    }
    .flex-control-paging{
        top: 380px;
    }
    .float-wrap{
        position: absolute;
    }
    #pages4-float-logo1{
        top: 30%;
        left: 5%;
        img{
            width: 40px;
        }
    }
    #pages4-float-logo2{
        top: 50%;
        right: 4%;
        img{
            width: 58px;
        }
    }
    #pages4-float1{
        top: 33%;
        left: 15%;
        img{
            width: 8px;
        }
    }
    #pages4-float2{
         top:45%;
        left: 3%;
        img{
            width: 15px;
        }
    }
    #pages4-float3{
        top: 38%;
        right:15%;
        img{
            width: 20px;
        }
    }
    #pages4-float4{
        top: 30%;
        right: 8%;
        img{
            width: 10px;
        }
    }
    #pages4-float5{
        bottom: 12%;
        left: 36%;
        img{
            width: 8px;
        }
    }
}
.luxian{
  position: relative;
  h3{
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    color: #e4e4e4;
    font-size: 25px;
    font-family: '微软雅黑';
    margin: 0;
    top: 8%;
  }
  #luxian-cn{
    width: 100%;
  }
}
.page5{
    .none-button {
      background: transparent;
      border: 1px solid #fff;
      padding: 0px 15px;
      font-size: 12px;
      line-height: 32px;
      color: #fff;
    }
    background: #f5f5f5;
    overflow: hidden;
    .container{
        width: 80%;
        margin: 50px auto;
        .masonry {
            display: flex;
            flex-direction: row;
        }

        .column {
            display: flex;
            flex-direction: column;
            width: calc(100%/4);
            .item{
                margin: 20px;
                img{
                  width: 100%;
                  border-radius: 5px;
                }
                h4{}
                h5{
                  margin:0px;
                }
                p{
                  font-size: 14px;
                  line-height: 23px;
                  color: #666666;
                  font-weight:normal;
                }
            }
        }
        .masonry-team .column{
          width: calc(100%/3);
        }
        ul{
            padding: 0;
        }
        ul li{
            list-style: none;
            display: inline-block;
            width: 245px;
            margin: 15px 20px 15px 0px;

          img{
              width: 245px;
              border-radius:5px ;
          }
          h5{
              margin:0px;
          }
          p{
              font-size: 14px;
              line-height: 23px;
              color: #666666;
              font-weight:normal;
          }
        }
    }
    h3{
       font-weight: 600;
       font-size: 20px;
    }
    p{
      font-size: 16px;
      line-height: 25px;
      color: #162039;
      font-weight: 600;
    }
}
footer {
    background-color: #000;
    padding-top: 100px !important;
    /*width: 1300px;*/
    line-height: 50px;
    padding-top: 22px;
    margin: auto;
    position: relative;
}

footer .wrap {
    float: inherit;
    border-top: 3px solid rgba(255, 255, 255, 0.1);
}

footer:after,
footer .wrap:after {
    content: '';
    display: block;
    clear: both;
}

footer div {
    float: left;
    box-sizing: border-box;
}

footer .nav {
    width: 50%;
    color: rgba(255, 255, 255, 0.70);
    margin-top: 22px;
}

footer .contact {
    width: 50%;
    border-right: 3px solid rgba(255, 255, 255, 0.1);
    margin-top: 22px;
}

footer .contact .waysbox {
    margin-left: 42px;
    /*float: left;*/
    position: relative;
}

footer .contact .ways {
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
    position: absolute;
    display: none;
    line-height: 30px;
    top: -65px;
    left: 50%;
}

footer .contact .waysbox:nth-child(2) {
    margin-left: 105px;
}

footer .nav span,
footer .nav i {
    float: left;
    margin-left: 55px;
    cursor: pointer;
}

footer .copyright {
    width: 100%;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.2);
    text-align: center;
    margin: 20px 0;
}
footer{
    .waysbox a{
        display: inline-block;
        height: 38px;
        width: 44px;
    }
    #mail{
        background: url(../img/Mail.png)no-repeat;
    }
    #mail:hover{
        background: url(../img/Mail2.png)no-repeat;
    }
    #facebook{
        background: url(../img/facebook.png)no-repeat;
    }
    #facebook:hover{
        background: url(../img/facebook2.png)no-repeat;
    }
    #telegram{
        background: url(../img/telegram2.png)no-repeat;
    }
    #telegram:hover{
        background: url(../img/telegram.png)no-repeat;
    }
    #twitter{
        background: url(../img/twitter1.png)no-repeat;
    }
    #twitter:hover{
        background: url(../img/twitter2.png)no-repeat;
    }
}
#vec-nav{
    width: 100%;
    position: fixed;
    top:0;
    left: 0;
    z-index: 999;
    transition:margin-top 1s;
    -moz-transition:margin-top 1s; /* Firefox 4 */
    -webkit-transition:margin-top 1s; /* Safari and Chrome */
    -o-transition:margin-top 1s; /* Opera */
}
.video-area {
    background-color: #0e1630;
}

@media screen and (max-width: 768px) {
    .home {
        #vec-nav{
        }
        .page1{
            .video-area{
                background: url(../img/bg-new.jpg);
                background-size: cover;
            }
            .icon {
              background-size: cover;
              display: inline-block;
              vertical-align: middle;
            }

            .icon.fj-icon {
              background-image: url('../img/fj-icon.png');
              width: 16px;
              height: 14px;
            }

            .icon.book-icon {
              background: url('../img/book-icon.png');
              width: 11px;
              height: 13px;
              margin-right: 5px;
            }
           #J_video_player{display: none;}
           .main-title {
                font-family:'微软雅黑';
                line-height: 20px;
               .logo{
                   max-width: 75%;
               }
               .content{
                   font-size:14px;
                   top: 30%;
                   text-align: left;
                   color: #e4e4e4;
                   .title{
                     font-size: 20px;
                     color: #ffffff;
                   }
               }

              .mobile-btn {
                  margin-top: 88px;
                  display: block!important;
              }
           }
        }
        #technology{
          padding-top: 15px;
          #flexslider-video{
            .flex-control-nav{position: absolute;top: 390px;}
            .flex-prev,.flex-next{
              position: absolute;
              top: 210px;
              text-indent: 0;
              font-size: 24px;
              font-weight: 600;
              color: #ffffff;
            }
            .flex-next{text-indent: 16px;}
            .flex-prev{text-indent: -5px;}
          }
          .header {
                font-size: 22px;
            }
            .video-item{
                width: 100%;
                height: auto;
                text-align: center;
                margin: 50px auto;
                display: block;
                .content{
                    display: block;
                    float: none;
                    margin: 0 auto;
                    margin-bottom: 80px;
                    padding: 0;
                    text-align: center;
                    width: 70%;
                    .header{
                      font-size: 20px;
                    }
                }
                .video-play{
                    width: 90%;
                    margin: 0 auto;
                    display: block;
                    float: none;
                    .video-js {
                        width: 100%;
                    }
                }
            }
            .video-item-1,.video-item-3{
                display: flex;
                flex-direction: column-reverse;
            }
        }
        .page2 .how-use img {
          margin: 30px 0px 0px 0px;
        }
        .page2 .how-use{
          margin-top: -30px;
          margin-bottom: 30px;
          #liucheng-pc{display: none;}
          #liucheng-phone{display: block;}
        }
        .page3{
            .page3-header{
                p{
                    width: 70%;
                }
            }
            .page3-section{
              text-align: center;
              display: flex;
              flex-direction: column;
              margin: 12px auto;
                .section-words{
                    display: block;
                    width: 100%;
                    float: none;
                }
                .section-imgs{
                    display: block;
                    float: none;
                    width: 100%;

                }
                .img-phone{display: block;}
                .img-pc{display: none;}
            }
            .page3-section-1,.page3-section-3{
                display: flex;
                flex-direction: column-reverse;
            }

        }

        .page3 .page3-header {
            padding: 35px 0px;
        }
        .page4{
            .container{
                width: 90%;
                .slides{
                    img{
                        width: 75%;
                    }

                }
              .flex-control-paging{
                  top:335px;
              }
              .flex-direction-nav a{
                  top: 23%;
              }
            }

        }
        .page5{
            .container{
                .masonry {
                    display: block;
                }
                .column {
                    display: block;
                    width: 100%;

                    .item__content{
                        text-align: center;
                        margin-bottom: 50px;
                        img{
                            width: 80%;
                            border-radius: 5px;
                        }
                    }
                }
            }
        }
  }
  .home .page4 .container .flex-direction-nav a{
    top: 160px;
  }
  .luxian{
    h3{
      font-size: 18px;
      top: 5%;
    }
  }
  footer div{
		text-align: center;
		width: 100%;
	}
	footer .nav span, footer .nav i{
		clear: both;
		display: block;
		text-align: left;
	}
	footer .contact .waysbox{
		width: 25%;
		margin-top: 30px;
		margin-left: 0px !important;
	}
	footer .contact{
		width: 100%;
		border: none;
		padding-bottom: 30px;
	}
	footer .nav{
		display: none;
	}
	footer .copyright{
		font-size: 12px;
		line-height: 24px;
	}
	footer .contact .waysbox:nth-child(2){
		margin-left: 55px;
	}
}
@media screen and (max-width: 450px){
  .home .page4 .container .flex-control-paging{
    top: 200px;
  }
  .home .page4 .container .flex-direction-nav a{
    top: 80px;
  }
  .home #technology #flexslider-video .flex-control-nav{
    top:387px;
  }
  .home #technology #flexslider-video .flex-direction-nav a{
    top:223px;
  }
}
@media screen and (max-width: 375px){
  .home .page4 .container .flex-control-paging{
    top:175px;
  }
  .home .page4 .container .flex-direction-nav a{
    top: 80px;
  }
  .home #technology #flexslider-video .flex-control-nav{
    top:388px;
  }
  .home #technology #flexslider-video .flex-direction-nav a{
    top:220px;
  }
}
@media screen and (max-width: 320px){
  .home .page4 .container .flex-control-paging{
    top:150px;
  }
  .home .page4 .container .flex-direction-nav a{
    top: 70px;
  }
}
